﻿@model CustomerRewardPointsModel
@{
    Layout = "_ColumnsTwo";

    //title
    NopHtml.AddTitleParts(T("PageTitle.Account").Text);
    //page class
    NopHtml.AppendPageCssClassParts("html-account-page");
    NopHtml.AppendPageCssClassParts("html-reward-points-page");
}
@section left
{
    @await Component.InvokeAsync("CustomerNavigation", new { selectedTabId = CustomerNavigationEnum.RewardPoints })
}
<div class="page account-page reward-points-page">
    <div class="page-title">
        <h1>@T("Account.MyAccount") - @T("Account.RewardPoints")</h1>
    </div>
    <div class="page-body">
        <div class="reward-points-overview">
            <div class="current-balance">@T("RewardPoints.CurrentBalance", Model.RewardPointsBalance, Model.RewardPointsAmount)</div>
            @if (Model.MinimumRewardPointsBalance > 0)
            {
                <div class="min-balance">@T("RewardPoints.MinimumBalance", Model.MinimumRewardPointsBalance, Model.MinimumRewardPointsAmount)</div>
            }
        </div>
        <div class="section reward-points-history">
            <div class="title">
                <strong>@T("RewardPoints.History")</strong>
            </div>
            @if (Model.RewardPoints.Count > 0)
            {
                <div class="table-wrapper">
                    <table class="data-table">
                        <colgroup>
                            <col width="20%"/>
                            <col width="10%"/>
                            <col width="10%"/>
                            <col/>
                            <col width="20%"/>
                        </colgroup>
                        <thead>
                        <tr>
                            <th class="date">
                                @T("RewardPoints.Fields.CreatedDate")
                            </th>
                            <th class="points">
                                @T("RewardPoints.Fields.Points")
                            </th>
                            <th class="points-balance">
                                @T("RewardPoints.Fields.PointsBalance")
                            </th>
                            <th class="message">
                                @T("RewardPoints.Fields.Message")
                            </th>
                            <th class="endDate">
                                @T("RewardPoints.Fields.EndDate")
                            </th>
                        </tr>
                        </thead>
                        <tbody>
                        @for (var i = 0; i < Model.RewardPoints.Count; i++)
                        {
                            var item = Model.RewardPoints[i];
                            <tr @(i%2 == 0 ? Html.Raw(" class=\"odd\"") : Html.Raw(" class=\"even\""))>
                                <td class="date">
                                    @item.CreatedOn
                                </td>
                                <td class="points">
                                    @item.Points
                                </td>
                                <td class="points-balance">
                                    @item.PointsBalance
                                </td>
                                <td class="message">
                                    @item.Message
                                </td>
                                <td class="endDate">
                                    @item.EndDate
                                </td>
                            </tr>
                        }
                        </tbody>
                    </table>
                </div>
                var pager = await Html.PagerAsync(Model.PagerModel);
                if (!string.IsNullOrEmpty(await pager.RenderHtmlContentAsync()))
                {
                    <div class="pager">
                        @pager
                    </div>
                }
            }
            else
            {
                <div class="no-data">
                    @T("RewardPoints.NoHistory")
                </div>
            }
        </div>
    </div>
</div>
